@charset "utf-8";
@import "../../base/_mixin.scss";

// 按钮
%button-more {
	display: block;
	width: 218px;
	height: 46px;
	line-height: 50px;
	font-size: 18px;
	border: 1px solid #333;
	color: #333;
	margin: 0 auto;
	text-align: center;

	&:hover {
		text-decoration: none;
		border: 1px solid #b37a33;
	}
}

//首页

/* 头部 */
.hd-wrap {
	width: 100%;
	color: #fff;

	.nav-box {
		position: relative;
	}
	
	.logo{
		margin-top: 23px;
	}
	.nav {
		margin-top: 25px;

		.item {
			
			&:hover:before {
				background: #fff;
			}

			&.current:before {
				background: #fff;
			}
		}
	}

	.hd-wrap-banner {
		height: 786px;
	}

}

.module-nav {
	position: relative;
	height: 85px;
	.logo {
		margin-top: 15px;

		img {
			width: 200px;
			height: 70px;
		}
	}

	.nav {
		margin-top: 25px;
	}
}
.module-product {
	margin-top: 30px;
}

/* 左图右文结构 */
.wrap-information {
    padding-top: 90px;
}
.wrap-information .information-box {
    min-height: 400px;
    padding-bottom: 90px;
    overflow: hidden;
}
.wrap-information .wrap-main {
    float: left;
    margin-right: 80px;
}
.wrap-information .wrap-side {
    float: left;
    width: 523px;
    margin-top: 21px;
}
.wrap-information .wrap-main .img-box,
.wrap-information .wrap-main img {
    width: 605px;
    height: 400px;
}
.wrap-information .txt-box {
    text-align: justify;
    padding-right: 30px;
}
.wrap-information .wrap-even .txt-box {
    padding-left: 30px;
    padding-right: 0;
}
.wrap-information .wrap-even .wrap-main {
    margin-right: 0;
    margin-left: 80px;
}
.wrap-information .txt-box .title-h3 {
	padding-bottom: 41px;
    font-size: 36px;
    color: #333;
    line-height: 1;
    //font-weight: bold;
}

.wrap-information .txt-box .txt {
    font-size: 16px;
    color: #333;
    line-height: 30px;
}

/* 产品展示*/
.wrap-new {
    overflow: hidden;
    padding: 70px 0 63px; 
    color: #333;

    .wrap-title {
	    padding: 0 20px 40px;

	     .title {
		    padding: 0 5px;
		}
	}

	.text {
		width: 780px;
		margin: 0 auto;
	    padding-top: 20px;
	    text-align: center;
	    font-size: 16px;
	    line-height: 30px;
	}

	 .new-box {
	    text-align: center;
	}

	 .col {
	    width: 615px;
	    float: left;

	    .col-box {
		    padding: 0 10px;
		    text-align: center;

			.img-box,img {
			    display: inline-block;
			    width: 595px;
			    height: 314px;
			}
		}
	}
}

.wrap-title {
    text-align: center;
    font-size: 34px;
    line-height: 1;
}

.wrap-fan {
    min-height: 445px;
}

/*UMF协会认证*/
.UMF {
	.wrap-new {
		padding-top: 65px 0 71px;

		.wrap-title {
			padding-bottom: 30px;
		}

		.text {
			font-size: 22px;
			line-height: 1;
			padding: 0;
		}

		.new-box {
			margin-top: 40px;
		}
	}

	.new-box {
	    text-align: center;

	    img {
	    	width: 425px;
	    	height: 600px;
	    }
	}
}

/*什么是UMF*/
.whatUMF {

	.wrap-new {
		padding-bottom: 70px;

		.wrap-title {
			padding: 0;
		}
		.text {
			padding-bottom: 70px;
		}
	}

	.new-box {
	   	margin-top: 40px;

	    img {
	    	width: 800px;
	    	height: 360px;
	    }
	}
}

/* TAKU品牌故事*/
.product-banner {
	height: 320px;
}

.product-nav-box {
	position: relative;
	height: 107px;
	color: #333;

	.logo {
		margin-top: 10px;
	}
}

.hd-wrap .product-nav-box .nav .item.current:before {
	background-color: #333;
}

.hd-wrap .product-nav-box .nav .item:hover:before {
	background-color: #333;
}

.TAKU-farm {
	
	.wrap-information {

		.information-box {
			padding-bottom: 70px;
		}
		.wrap-main {
			margin-right: 128px;
		}
	}
	.wrap-side {
		width: 477px;
		margin-top: 56px;

		.txt-box .title-h3 {
			padding: 0;
		}

		.title-h4 {
			margin-top: 20px;
			font-size: 24px;
			line-height: 1;
		}

		.txt {
			margin-top: 40px;
		}
	}
}
.taku-honey .wrap-new {
	padding-bottom: 0;
}
.taku-honey .text {
	width: 969px; 
	text-align: left;
}

.module-process .process-title .desc {
	margin-top: 40px;
	font-size: 16px;
	line-height: 1;
	text-align: center;
}

.brandStory-pic {
	margin-bottom: 80px;
}

/*UMF*/
.UMFHA {
	.wrap-new .wrap-title {
		padding: 30px 0 17px;
	}
	.wrap-new .text {
		padding: 0;
	}
}

.find-UMF {
	.wrap-new {
		padding-top: 0;
	}
	.picList-wrap {
		width: 801px;
		margin: 0 auto;

		.picList {
			width: 802px;

			.item {
				margin-right: 2px;
			}
		}
	}

}

.UMF-cart {
	.wrap-new {

		padding-top: 0;

		.wrap-title {
			padding-bottom: 23px;
		}
		.text {
			padding: 0;
			font-size: 16px;
			line-height: 30px;
		}

		.new-box {
			margin-top: 33px;
		}
	}
}

.member {
	
	width: 800px;
	margin: 0 auto 80px;

	.cont-box {

		width: 800px;
		border-bottom: 1px solid #ccc;  
		padding: 40px 0; 

		&:last-child {
			border: none;
		}

		&:after {
			@extend %clearfix;
		}

		.pic {
			float: left;
			margin-right: 70px;
		}

		.cont {
			float: left;
			width: 550px;
			margin-top: 13px;

			.title {
				font-size: 22px;
				margin-bottom: 20px;
			}
			.text {
				font-size: 14px;
			}
		}
	}
}

/*麦卢卡生产工艺*/
.module-process {
	margin: 70px auto 40px;
}
.module-process .process-title .title {
	font-size: 34px;
	line-height: 1;
	text-align: center;
}

.process-cont {
	width: 1210px;
	margin-top: 40px;

	&:after{
		@extend %clearfix;
	}

	.marCtrlR {
		margin: 0 104.5px 0 121.5px 
	}
	.marCtrlL {
		margin: 0 121.5px 0 104.5px;
	}
}
.process-cont .item {
	float: left;
}
.process-cont .item .pic {
	width: 328px;
	height: 238px;
}
.process-cont .item img {
	width: 100%;
	height: 100%;
}
.process-cont .item .text {
	margin: 10px 0 30px;
}
.process-cont .item .desc {
	text-align: center;
	font-size: 18px;
	line-height: 18px;
	color: #666;
}


/* 查看详情按钮 */
.product-item {
	margin-bottom: 60px;

	.product-item-pic img {
		width: 396px;
		height: 396px;
	}
}

.product-item-detail {
	margin-top: 25px;

	.more {
		@extend %button-more;
	}
}

/* 分页 */
.page{
    padding-bottom: 55px;
    font-size: 0;
    line-height: 30px;
    text-align: center;
}
.page .number li,.page ul,.page div{
    display: inline-block;
}
.page .number li a{
    display: inline-block;
    width: 30px;
    height: 30px;
    border: 1px solid #e6e6e6;
    margin-left: 5px;
    font-size: 14px;
    line-height: 30px;
    text-align: center;
    color: #666;
}
.page .dec img,.page .add img{
    padding-top: 0px;
}
.page .number li a:hover,
.page .number li a:active,
.page .number .active{
    color: #222;
    background: #fff;
    border-color: #222;
    text-decoration: none;
}
.page .omit,.page .dec,.page .add{
    display: inline-block;
    width: 30px;
    height: 30px;
    margin-left: 5px;
    font-size: 14px;
    line-height: 30px;
    text-align: center;
    color: #666;
}
.page .sum{
    display: inline-block;
    margin-left: 10px;
    font-size: 12px;
    line-height: 35px;
    color: #999;
}
.page .skip{
    display: inline-block;
    margin-left: 17px;
    font-size: 12px;
    text-align: center;
}
.page .skip input{
    display: inline-block;
    width: 30px;
    height: 30px;
    border:1px solid #e5e5e5;
    margin:0 6px;
    text-align: center;
}
.page  .confirm a{
    display: inline-block;
    width: 58px;
    height: 30px;
    border:1px solid #e5e5e5;
    margin-left: 20px;
    font-size: 12px;
    line-height: 30px;
    text-align: center;
    color: #666;
    background: #fff;
}
.page .confirm a:hover{
    color: #222;
    background: #fff;
    border-color: #222;
    text-decoration: none;
}

